<template>
  <div class="onebox">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" label-position="left">
      <el-form-item label="元数据名" prop="name" class="formList1">
        <el-input v-model="formData.name" placeholder="请输入元数据名" clearable :style="{ width: '95%' }"
          @focus="isRemind1 = false"></el-input>
        <span class="remind1" v-show="isRemind1 && inputStatus != 0">元数据名不可重复</span>
      </el-form-item>
      <el-form-item label="元数据标识" prop="label" class="formList1">
        <el-input v-model="formData.label" placeholder="请输入元数据标识" clearable maxlength="255" show-word-limit
          :style="{ width: '95%' }" @focus="isRemind2 = false">
        </el-input>
        <span class="remind1" v-show="isRemind2 && inputStatus != 0">由字母、数字和下划线组成，与元数据名含义相同，不可重复，保存后不可修改</span>
      </el-form-item>
      <el-form-item label="项目" prop="region">
    <el-select v-model="formData.region" placeholder="请选择项目">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="应用" prop="region">
    <el-select v-model="formData.region" placeholder="请选择应用">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="元数据类型" prop="region">
    <el-select v-model="formData.region" placeholder="请选择元数据类型">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="元数据来源" prop="region">
    <el-select v-model="formData.region" placeholder="请选择元数据来源">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
    

   </el-form>
    <!-- 新增模块  -->
  
    <div v-if="inputStatus == 1" slot="footer">
      <el-button type="primary" @click="preservation" class="dialog-footer">保存</el-button>
    </div>
  </div>
</template>
<script>
import { getModuleList, editMetadataInfo } from "@/api/metadata/metadata";
export default {
  components: {

  },
  props: {
    allList: {
      type: Object,
    },
  },
  data() {
    const validatorName = (rule, value, callback) => {
      // var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z_][A-Za-z_0-9]{0,}$/;
      var reg = /^(?!_)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
      var regnum = /^[0-9].*$/;
      if (!value) {
        return callback("请输入元数据标识");
      } else {
        // setTimeout(() => {
        if (!reg.test(value)) {
          callback(new Error("只含有汉字、数字、字母、下划线,不能以下划线开头"));
        } else if (regnum.test(value)) {
          callback(new Error("不能以数字开头!"));
        }
        else {
          callback();
        }
        // }, 100);
      }
    };
    const validatorLabel = (rule, value, callback) => {
      // var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z_][A-Za-z_0-9]{0,}$/;
      var reg = /^[a-zA-Z0-9_]+$/;
      var regnum = /^[0-9].*$/;
      var regline = /^([a-zA-Z])[a-z0-9]*$/i;
      if (!value) {
        return callback("请输入元数据标识");
      } else {
        // setTimeout(() => {
        if (!reg.test(value)) {
          callback(new Error("只能由字母、数字和下划线组成 "));
        } else if (regnum.test(value)) {
          callback(new Error("不能以数字开头!"));
        } else if (!regline.test(value)) {
          callback(new Error("只能由字母开头!"));
        }
        else {
          callback();
        }
        // }, 100);
      }
    };
    return {
      //0---查看  1--编辑
      inputStatus: "",
      //form的数据
      formData: {
        name: "",
        label: "",
        moduleName: "",
        checkList: [],
        description: "",
      },
      queryParams: {},
      rules: {
        name: [
          {
            required: true,
            validator: validatorName,
            trigger: "blur",
          },
        ],
        label: [
          {
            required: true,
            validator: validatorLabel,
            trigger: "blur",
          },
        ],
      },
      //模块的数据
      modelList: [],
      AllcheckList: [],
      dialogVisible: false,
      isRemind1: true, //第一个提示
      isRemind2: true, //第二个提示
    };
  },
  computed: {},
  watch: {
    "formData.moduleName": function (val) {
      if (val === "creat") {
        this.dialogVisible = true;
        this.formData.moduleName = "";
      }
    },
  },
  created() { },
  mounted() {
    if (localStorage.getItem("status") == 2) {
      this.inputStatus = localStorage.getItem("status");
    } else {
      this.inputStatus = this.allList.status;
    }
   
    //挂载以后立即加载模块的列表
    this.getModulesList();
  },
  methods: {
    getModulesList() {
      getModuleList()
        .then((response) => {
          this.modelList = response.data;
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
    },
    //关闭新增模块弹框
    closedia() {
      this.dialogVisible = false;
      this.getModulesList();
    },
    validateForm() {
      let flag = false;
      this.isRemind1 = false;
      this.isRemind2 = false;
      this.$refs.elForm.validate((valid) => {
        flag = valid;
      });
      return flag;
    },
    //保存
    preservation() {
      // this.queryParams.modified = "";
      this.formData.checkList = this.AllcheckList;
     
        editMetadataInfo(this.queryParams)
          .then((response) => {
            if (response.success) {
              this.$modal.msgSuccess("修改成功");
              this.$router.push("/metadata/metadataList");
            }
          })
          .catch((err) => {
            // this.$message.error(err.message);
            console.log(err);
          });
      
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";

.onebox {
  width: 56%;
  margin: 40px auto 30px;
}

.dialog-footer {
  width: 122px;
  height: 40px;
  background-color: $labelColor;
  color: #fff;
  font-size: 16px;
  margin-left: 100px;
  border-color: #e8eaec;
  border-radius: 4px;
}

.el-checkbox-group {
  width: 100%;
}

::v-deep .newcheckout1 {
  width: 100%;
  margin-bottom: 0 !important;
}

.el-checkbox {
  width: calc(87% / 2);
  position: relative;
}

.describe1 {
  display: block;
  font-size: 10px;
  color: #b3bdc6;
  position: absolute;
  top: -20px;
  left: 23%;
}

.describe2 {
  display: block;
  font-size: 10px;
  color: #b3bdc6;
  position: absolute;
  top: -20px;
  left: 71%;
}

.el-form-item {
  margin-bottom: 50px;
}

.newoptionLsit1 {
  width: 93%;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  color: $labelColor;
  border: 1px solid $labelColor;
  padding: 0 !important;
  border-radius: 4px;
}

::v-deep .el-textarea__inner {
  min-height: 60px !important;
}

::v-deep .el-checkbox-group {
  margin-left: 100px;
  margin-top: -20px;
}

::v-deep .el-checkbox {
  margin-bottom: 30px;
}

::v-deep .el-checkbox__inner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

::v-deep .is-checked .el-checkbox__inner {
  background-color: #fff !important;
}

::v-deep .is-checked .el-checkbox__inner::after {
  background: $labelColor ;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 3.5px !important;
  left: 3.5px !important;

}

::v-deep .is-checked .el-checkbox__label {
  color: $labelColor;
}

.formList1 {
  position: relative;
}

.remind1 {
  font-size: 12px;
  position: absolute;
  bottom: -40px;
  left: 0px;
  color: #abb7c0;
}

.optionList:nth-child(2n + 1) {
  background: #f2f6fc;
  border-radius: 4px;
}

// .hover{
//   background-color:rgba(255, 255, 255, 0)!important;
// }
</style>
